Getting Started with React Development with the React Suite Library — Buttons

React Suite is a useful UI library that lets us add many components easily into our React app.

In this article, we’ll look at how to use it to add components to our React app.

Installation

We can install React Suite by running:

npm i rsuite --save

with NPM or we run:

yarn add rsuite

with Yarn.

Button

Once we installed the package, we can add a button by using the Button component:

import React from "react";
import { Button } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Button appearance="default">Default</Button>
    </div>
  );
}

We set the background color with the appearance prop.

Other possible values include primary , link , subtle , and ghost .

We have to add the bundled CSS to see the styles.

We can change the size with the size prop:

import React from "react";
import { Button } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Button size="lg">Default</Button>
    </div>
  );
}

lg makes it large.

Other values include md for medium size, sm for small size, or xs for extra small.

We can add an icon button with the IconButton component.

For instance, we can write:

import React from "react";
import { IconButton, Icon } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <IconButton icon={<Icon icon="star" />} circle size="lg" />
    </div>
  );
}

We can add a button group with ButtonGroup :

import React from "react";
import { ButtonGroup, Button } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <ButtonGroup size="md">
        <Button>Left</Button>
        <Button>Center</Button>
        <Button>Right</Button>
      </ButtonGroup>
    </div>
  );
}

We can set the color with the color prop:

import React from "react";
import { Button } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Button color="orange">Orange</Button>
    </div>
  );
}

We can add icons to buttons with the Icon component:

import React from "react";
import { Button, Icon } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <Button color="red">
        <Icon icon="google-plus-circle" /> Google Plus
      </Button>
    </div>
  );
}

We can add a block-level button with the block prop:

import React from "react";
import { Button, ButtonToolbar } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

export default function App() {
  return (
    <div className="App">
      <ButtonToolbar>
        <Button appearance="default" block>
          Block
        </Button>
      </ButtonToolbar>
    </div>
  );
}

Also, we can add a vertical button group with the vertical prop on the ButtonGroup :

import React from "react";
import { Button, ButtonGroup } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

const appearance = "primary";

export default function App() {
  return (
    <div className="App">
      <ButtonGroup vertical>
        <Button appearance={appearance}>Top</Button>
        <Button appearance={appearance}>Middle</Button>
        <Button appearance={appearance}>Bottom</Button>
      </ButtonGroup>
    </div>
  );
}

And we can make the buttons equally side in the button group with the justified prop:

import React from "react";
import { Button, ButtonGroup } from "rsuite";
import "rsuite/dist/styles/rsuite-default.css";

const appearance = "primary";

export default function App() {
  return (
    <div className="App">
      <ButtonGroup justified>
        <Button appearance={appearance}>Top</Button>
        <Button appearance={appearance}>Middle</Button>
        <Button appearance={appearance}>Bottom</Button>
      </ButtonGroup>
    </div>
  );
}

Conclusion

We can install React Suite and add buttons from them easily in our React app.